過渡效果（Transition）是 CSS 中用來創造流暢動畫的重要功能，能讓元素的狀態變化更加自然平滑。當元素的樣式屬性發生改變時，過渡效果可以讓這個改變不再是瞬間完成，而是在指定的時間內逐漸變化。這種漸進式的視覺變化能大幅提升使用者體驗，讓網頁互動更加生動有趣。
transition 屬性可用來設定元素在狀態改變時的過渡效果，它可以讓樣式的變化變得平滑自然，而不是突然改變。
/* 基本語法 */
transition: 屬性 過渡持續時間 時間函數 延遲時間;
.button {
background-color: blue;
transition: background-color 0.3s ease 0s;
}
.button:hover {
background-color: red; /* 背景色會在 0.3 秒內平滑變化 */
}
設定 transition 屬性時，需要將它設定在，要套用過渡效果的屬性選擇器當中。舉例來說，如果需要過渡按鈕的背景顏色，就需要將 transition 寫在設有背景顏色的選擇器當中。而內部其他元素則不會受過渡效果影響。
.button {
padding: 8px 16px;
background: #0084ff44;
/* 過渡設定在 .button */
transition: 0.3s;
.text {
color: #003b72;
}
}
.button:hover {
/* 背景色 #0084ff44 過渡為 #0084ff */
background: #0084ff;
.text {
/* 文字顏色 #003b72 瞬間轉換成 #fff */
color: #fff;
}
}
transition 簡寫屬性實際上包含四個子屬性：
.button {
/* 分開設定各個屬性 */
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
/* 等同於簡寫 */
transition: background-color 0.3s ease 0s;
}
使用 transition-property 屬性可以指定哪些 CSS 屬性需要套用過渡效果。可以指定單一屬性、多個屬性，或是所有屬性。使用時需注意，並非所有 CSS 屬性都支援過渡效果，某些屬性在改變時會立即完成而無法產生漸變。以下整理出支援與不支援的常見屬性：
color、background-color、border-color、outline-color
width、height、max-width、max-height、min-width、min-height
margin、padding
top、right、bottom、left
transform（包括 translate、rotate、scale）opacity
box-shadow、text-shadow
border-width、border-radius
font-size、letter-spacing、line-height
display：顯示方式（顯示模式切換無法產生過渡，例如：block 轉化成 none）background-image：背景圖片（圖片無法漸變，通常會使用 opacity 替代）background：漸層背景（漸層跟背景圖片類似，無法產生過渡效果）font-family：字體/* 不支援的範例 */
.no-transition {
display: block;
/* 無效，display 改變是瞬間的 */
transition: display 0.3s;
&:hover {
/* 會立即消失，不會有過渡效果 */
display: none;
}
}
/* 替代方案：使用 opacity 搭配 visibility */
.fade-transition {
opacity: 1;
visibility: visible;
transition: opacity 0.3s, visibility 0.3s;
&.hidden {
opacity: 0;
visibility: hidden;
}
}
transition-duration 設定過渡效果的持續時間，決定了動畫從開始到結束需要多長時間。
.element {
transition-duration: 0.3s; /* 秒 */
transition-duration: 300ms; /* 毫秒 */
transition-duration: 0s; /* 無過渡效果 */
}
transition-timing-function 控制過渡效果的動畫速度曲線，決定動畫在不同階段的快慢變化。
.element {
transition-timing-function: ease; /* 預設：慢-快-慢 */
transition-timing-function: linear; /* 線性：勻速 */
transition-timing-function: ease-in; /* 加速：慢-快 */
transition-timing-function: ease-out; /* 減速：快-慢 */
transition-timing-function: ease-in-out; /* 加減速：慢-快-慢 */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
ease（預設）：開始和結束時較慢，中間較快，適合大多數情況linear：全程勻速，適合旋轉、循環動畫ease-in：開始慢結束快，適合元素消失、縮小ease-out：開始快結束慢，適合元素出現、放大ease-in-out：開始和結束都慢，中間快，類似 ease 但更平滑cubic-bezier(x1, y1, x2, y2)：自訂貝茲曲線，能精確控制動畫速度變化transition-delay 設定過渡效果開始前的延遲時間，可以用來創造連續動畫效果。
.element {
transition-delay: 0.5s; /* 延遲 0.5 秒後開始 */
transition-delay: 0s; /* 立即開始（預設）*/
transition-delay: 200ms; /* 延遲 200 毫秒 */
}
游標移入圖片的放大效果：建立一個容器來放置圖片，並設定變形放大和過渡效果，當滑鼠移入容器時，圖片會平滑地放大。
<div class="image-box">
<img src="images/photo.jpg" class="image">
</div>
.image-box {
overflow: hidden; /* 確保放大的圖片不超出容器 */
border-radius: 8px;
width: 500px;
height: 400px;
.image {
width: 100%;
height: 100%;
object-fit: cover; /* 確保圖片完全覆蓋容器 */
transition: transform 0.5s ease-out; /* 設定過渡效果 */
}
/* 滑鼠移入時 .image-box */
&:hover .image {
transform: scale(1.2); /* .image 圖片放大 */
}
}
表單輸入框效果：表單元素在聚焦時使用過渡效果，可以增強使用者體驗。
<input type="text" class="input">
.input {
border: 1px solid #ddd;
padding: 8px;
font-size: 16px;
border-radius: 4px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
注意游標觸碰區域：設計 hover 效果時，應避免將會移動的元素作為觸碰區域，否則可能導致元件產生抽動現象。由以下例子說明，當卡片向上移動時，滑鼠可能會離開卡片區域，使卡片回到原位，然後滑鼠又進入卡片區域，造成抖動循環。
/* 錯誤範例 */
.card {
width: 250px;
height: 400px;
background: #70cc7c;
position: relative;
transition: transform 0.3s;
}
/* 當滑鼠移入時 */
.card:hover {
transform: translateY(-10px); /* 卡片向上移動 */
}
文字氣泡效果：當游標移入按鈕時，會顯示文字氣泡浮出。可以使用透明度來過渡文字氣泡的顯示。以下範例使用偽元素作為文字氣泡，因為偽元素也存在於該元素當中，所以也算是觸碰區。為了避免文字氣泡影響游標互動，可以使用 pointer-events: none; 設定穿透點擊，讓游標不會與文字氣泡互動。
.button {
position: relative;
padding: 12px 20px;
background: #3498db;
color: #fff;
width: fit-content;
border-radius: 8px;
cursor: pointer; /* 手指游標 */
}
.button::before {
content: '氣泡文字';
position: absolute;
bottom: 100%;
left: 50%;
width: max-content;
background: #000000bb;
border-radius: 8px;
padding: 8px;
transform: translate(-50%, 4px);
transition: 0.3s;
opacity: 0;
/* 穿透點擊：確保氣泡不會影響滑鼠事件 */
pointer-events: none;
}
.button:hover {
background: #1a7bbc;
&::before{
opacity: 1;
transform: translate(-50%, -4px);
}
}
今天介紹了 CSS 的 transition 過渡效果，平常最常使用簡寫形式，一次設定完整的過渡效果：
.element {
transition: transform 0.3s ease 0s;
}
這一行依序代表「套用的屬性、過渡時間、時間函數與延遲時間」，也就是 transition-property、transition-duration、transition-timing-function 和 transition-delay。當元素的 transform 發生改變時，就會在 0.3 秒內以 ease 的速度曲線平順完成變化。
設定過渡效果時，需要注意並非所有 CSS 屬性都支援漸變，像是 display 就無法直接產生過渡。遇到這類情況時，可以搭配 opacity 和 visibility，設計出更自然的顯示與隱藏效果。
transition 是製作網頁互動效果的重要基礎，按鈕 hover、圖片放大和輸入框聚焦等效果，都能透過它變得更加流暢。搭配前一天介紹的 transform，就能製作出更多自然的互動動畫！
(ﾉ>ω<)ﾉ 第 20 天拉！！！
iThome鐵人賽
看影片追技術